<html>

<head>
  <title>elementUi</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../lib/elementui/theme-chalk/index.css" type="text/css">
  <link rel="stylesheet" href="../css/init.css" type="text/css">
  <link rel="stylesheet" href="../css/theme.css" type="text/css">
</head>

<body>
  <div id="app">

    <el-row :gutter="8">
      <el-col :span="4" style="height: 99%;">
        <el-row>
          <div class="grid-content-header grid-content2 bg-purple" id="topicWork"></div>
        </el-row>
        <el-row>
          <div class="grid-content-header grid-content2 bg-purple" id="topicStudy"></div>
        </el-row>
      </el-col>
      <el-col :span="20">
        <el-row>
          <div class="grid-content-header grid-content3 bg-purple" id="sankeyChart"></div>
        </el-row>
        <el-row :gutter="8" style="height: 27%; margin-bottom: 10px;">
          <el-col :span="12">
            <div class="grid-content-header grid-content1 bg-purple" id="parallelChart"></div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content-header grid-content1 bg-purple" id="wordCloud"></div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
  <style>
    body {
      margin: 5px;
    }

    #app {
      height: 100%;
      width: 100%;
    }

    .el-row {
      margin-bottom: 10px;
    }

    .el-col {
      border-radius: 4px;
    }

    .bg-purple {
      background: #ffffff;
    }

    .grid-content1 {
      border-radius: 4px;
      min-height: 100%;
    }

    .grid-content2 {
      border-radius: 4px;
      min-height: 49%;
    }

    .grid-content3 {
      border-radius: 4px;
      min-height: 70%;
    }

    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  </style>
  <!-- 引入组件库 -->
  <script type="text/javascript" src="../lib/vue.js"></script>
  <script type="text/javascript" src="../lib/elementui/index.js"></script>
  <script type="text/javascript" src="../lib/jquery.js"></script>
  <script type="text/javascript" src="../lib/echarts.min.js"></script>
  <script type="text/javascript" src="../lib/d3.v4.min.js"></script>
  <script type="text/javascript" src="../lib/d3-sanKey.js"></script>
  <script type="text/javascript" src="../lib/echarts-wordcloud.min.js"></script>
  <script type="text/javascript" src="../js_draw/eAnalyst/topic.js"></script>
  <script type="text/javascript" src="../js_draw/eAnalyst/sankey.js"></script>
  <script type="text/javascript" src="../js_draw/eAnalyst/parallel.js"></script>
  <script type="text/javascript" src="../js_draw/eAnalyst/wordCloud.js"></script>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      mounted() {
        $.get('data/studyAndWork.json', function (data) {
          // console.log(data)
          var para_data = [];
          for (let i = 0; i < data.nodes.length; ++i) {
            var json = {};
            json['title'] = data.nodes[i].title;
            json['theme'] = data.nodes[i].theme;
            json['emotion'] = data.nodes[i].emotion;
            var keys = Object.keys(data.nodes[i]);
            for (let j = 6; j < 10; ++j) {
              json[keys[j]] = data.nodes[i][keys[j]];
            }
            para_data.push(json);
          }
          let topicName = '复学';
          let topicData = getTopicData(topicName, data.nodes);
          topicData = dataGroup(topicData);
          drawTopic(topicName, 'topicStudy', topicData);

          topicName = '复工';
          topicData = getTopicData(topicName, data.nodes);
          topicData = dataGroup(topicData);
          drawTopic(topicName, 'topicWork', topicData);

          drawSankey(data);
          drawParallel(para_data);
        });
      }
    });
  </script>
</body>

</html>